<template>
  <div class="main">
    <RePvTable
      ref="tableRef"
      :api="api"
      :auth="auth"
      :table-columns="columns"
      :result-format="resultFormat"
      :isExpandShow="true"
      :isPagination="1000"
      :edit-form="editForm"
      :adaptiveConfig="{ offsetBottom: 45 }"
      locale-name="dept"
    >
      <template #extOperation="{ row, size }">
        <el-button
          v-auth="'add'"
          class="reset-margin"
          link
          type="primary"
          :size="size"
          :icon="useRenderIcon(AddFill)"
          @click="openDialog(row)"
        >
          {{ t("buttons.add") }}
        </el-button>
      </template>
    </RePvTable>
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";
import { useDept } from "./utils/hook";
import { RePvTable } from "@/components/RePvTable";
import { useRenderIcon } from "@/components/ReIcon/src/hooks";
import AddFill from "@iconify-icons/ri/add-circle-line";
import { useI18n } from "vue-i18n";
const { t } = useI18n();

defineOptions({
  name: "Department"
});

const tableRef = ref();
const { api, auth, resultFormat, columns, editForm, openDialog } =
  useDept(tableRef);
</script>

<style lang="scss" scoped>
:deep(.el-table__inner-wrapper::before) {
  height: 0;
}

.search-form {
  :deep(.el-form-item) {
    margin-bottom: 12px;
  }
}
</style>
